<template>
  <div class="forget">
    <div class="top">
      <van-nav-bar left-arrow @click-left="$router.back()" />
    </div>
    <div class="main">
      <div class="Tips">
        <span>忘记密码</span>
        <div class="Tips-title">
          <span>请输入手机号码和验证码找回密码</span>
        </div>
      </div>

      <van-form @submit="onSubmit" ref="regForm">
        <van-field
          v-model="username"
          name="username"
          placeholder="请输入手机号"
          :rules="[
            { required: true, message: '请填写手机号' },
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
          ]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          placeholder="请输入新密码"
          :rules="[
            { required: true, message: '请输入新密码' },
            {
              validator: (e) => /^\w{6,12}$/.test(e),
              message: '密码格式为6-12位字母或数字',
            },
          ]"
        />
        <van-field
          v-model="vercode"
          center
          clearable
          placeholder="请输入短信验证码"
          :rules="[
            { required: true, message: '请填写验证码' },
            {
              pattern: /^\d{6}$/,
              message: '验证码格式错误',
            },
          ]"
        >
          <template #button>
            <van-button size="small" :disabled="btnDisabled" round type="primary" native-type="button" @click="send" 
              >{{code_text}}</van-button
            >
          </template>
        </van-field>
        <div style="margin: 16px; margin-top: 30px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { forget,sendSms  } from "@/api/user";

export default {
  data() {
    return {
      username: "",
      password: "",
      vercode: "",
      btnDisabled:false,
       code_text: "发送验证码",
      submitLoading: false,
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      let{username,password,vercode}=this
      forget({
        username,
        password,
        vercode
      }).then(res=>{
        console.log(res);
        if (res.code==0) {
          this.$toast(res.msg)
          setTimeout(() => {
           this.$router.push("login1");
          }, 1000);
        }else{
          this.$toast(res.msg)
        }
      })

    },

    // 发送验证码
    async send() {
      try {
        await this.$refs.regForm.validate("username");
        await this.$refs.regForm.validate("password");
        //    发送验证码按钮点击进入倒计时
        this.btnDisabled = true; //变成不可点击状态
        this.code_text = "发送中...";
        // 定义一个定时器
        let timer = null;
        // 定义一个倒计时的时间
        let count = 10;

        sendSms({
          mobile: this.username,
          type: "login",
        })
          .then((res) => {
            if (res.code == 0) {
              this.$toast(`验证码已经发送到${this.username},请注意查收`);

              timer = setInterval((e) => {
                count--;
                this.code_text = `${count}s后再次发送`;
                if (count <= 0) {
                  clearInterval(timer);
                  count = 10;
                  this.code_text = "再次获取";
                  this.btnDisabled = false;
                }
              }, 1000);
            } else {
              // 例如账号已存在等情况
              this.$toast(res.msg);
              this.btnDisabled = false; //变成不可点击状态
              this.code_text = "再次发送";
            }

            //   例如网络错误等原因进入到下面这个catch  并且提示他发送失败了 并进行再次发送  并且恢复到可点击状态
          })
          .catch((err) => {
            this.$toast(res.msg || "网络错误");
            this.btnDisabled = false; //变成不可点击状态
            this.code_text = "请再次请求";
          });
      } catch (error) {}
    },
  },
};
</script>

<style  lang="scss" lang="less" scoped>
.forget {
  background-color: rgb(245, 247, 249);
  height: 100vh;
  .main {
    .Tips {
      padding: 10px 16px;
      span {
        font-weight: bold;
        font-size: 28px;
      }
      .Tips-title {
        margin-top: 10px;
        span {
          font-size: 14px;
          color: rgb(153, 153, 153);
          font-weight: normal;
        }
      }
    }
  }
}
::v-deep .van-button--small {
  border: none;
}
::v-deep .van-icon {
  color: black;
}
::v-deep .van-button--info {
  background-color: @baseColor;
  border: none;
}
</style>